<template>
    <div class="back_contain_n">
        <!-- 头部搜索 -->
        <div class="Search_Top_Part">
            <div class="search_list" >
                <div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.deviceCode" placeholder="罐号">
                            <el-option  v-for="(item,index) in guanhaoDevices" :key="item.id"  :label="item.deviceCode" :value="item.deviceCode"></el-option>
                        </el-select>
                    </div>
                    <div class="input_flex">
                        <el-select clearable v-model="queryForm.name" placeholder="管坯名称">
                            <el-option label="U直" value="U直"></el-option>
                            <el-option label="伸直" value="伸直"></el-option>
                            <el-option label="普直" value="普直"></el-option>
                        </el-select>
                    </div>
                    <div class="input_flex">
						<el-select class="_right" clearable v-model="queryForm.userId" placeholder="拌料人" >
							<el-option v-for="(item,index) in userList" :key="index" :label="item.userName"
									   :value="item.id"  />
						</el-select>
                    </div>
                    <div class="input_flex daterange">
                        <el-date-picker v-model="time"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="search_bt">
                <span class="zll-search" @click="getList">搜索</span>
                <span class="zll-search-reset" @click="searchReset()">重置</span>
            </div>
        </div>
        <!-- table -->
		<sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   @getBackData="getList"
				   :isOperate="false"
		>
            <!--<template slot-scope="scope" slot="operate">-->
                <!--<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>-->
            <!--</template>-->
        </sys-table>
        <div class="zll-dialog">
            <popout title="配料明细" :visible.sync="addDialog" v-if="addDialog">
                <add ref="add" slot="content" :editData="editData"></add>
                <template slot="bottom">
                    <p class="zll-botton Info" @click="addDialog = false">关 闭</p>
                </template>
            </popout>
        </div> 
    </div>
</template>

<script>
    import Add from './add.vue'
	import {formatDate} from "@/plugins/formatDate";

    export default {
        data(){
            return {
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				queryForm: {
					deviceCode: '',
					name: '',
					userId: '',
				},
				backCount:0,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				userList:[],
				time:[],
				guanhaoDevices:[],
            }
        },
        methods: {

			getList(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.queryForm.startTime = ''
					self.queryForm.endTime = ''
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0||startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				self.$http({
					url: "/jinl/linepei/getLinePeiLists",
					method: "post",
					params:param
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						for(let data of resp.result){
							data.periodTime = (data.showStartTime||'')+'-'+(data.showEndTime||'')
						}
						self.tableData = resp.result;
						self.tableHeader = [
							{"columnValue": "createTimeFt", "columnName": "日期" },
							{"columnValue": "deviceCode", "columnName": "设备号" },
							{"columnValue": "gpName", "columnName": "管坯名称" },
							{"columnValue": "zlValue", "columnName": "主料(kg)" },
							{"columnValue": "flValue", "columnName": "辅料(kg)" },
							{"columnValue": "smValue", "columnName": "色母(kg)"},
							{"columnValue": "ratios", "columnName": "配比" },
							{"columnValue": "totalValue", "columnName": "总料重(kg)" },
							{"columnValue": "plUserName", "columnName": "配料人" },
							{"columnValue": "periodTime", "columnName": "拌料时段" },
							{"columnValue": "collectTime", "columnName": "搅拌时长(min)" },
							{"columnValue": "machineCount", "columnName": "挤塑机" },
						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
				});

			},


			edit(val, type) {
				let self = this;
				self.addDialog = true;
				self.type = type;
				self.$nextTick(() => {
					self.editData = Object.assign({}, val);
				});
			},
			searchReset() { //重置搜索
				this.time = [];
				this.queryForm = {
					deviceCode: '',
					name: '',
					userId: '',
				};
				this.getList();
			},
			getSelectUsers() {
				let self = this;
				self.userList = [];
				self.$http({
					url: "/jinl/login/getLoginSelectList",
					method: "post",
				}).then(resp => {
					if (resp.success) {
						self.userList = resp.result;
					}
				});
			},

			getDeviceGuanHao() {
				let self = this;
				self.guanhaoDevices = [];
				self.$http({
					url: "/jinl/device/getDeviceGuanHao",
					method: "post",
					params:{deviceCode:'B'}
				}).then(resp => {
					if (resp.success) {
						self.guanhaoDevices = resp.result;
					}
				});
			},
        },
        mounted(){
			let self = this;
            self.getDeviceGuanHao();
            self.getSelectUsers();
            self.getList()

        },
        components: {Add},
    }
</script>

<style lang="scss" scoped>
@import "@/style/SearchTop.scss";
</style>